<template>
  <view>
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"> </hx-navbar>
    <u-cell arrow-direction="right" @click="calendarShow = true">
      <view slot="title" class="flex f-36">
        <view class="w-100 c-99"> 欠款: </view>
        <view class="flex"> 1112 </view>
      </view>
    </u-cell>

    <u-cell arrow-direction="right" @click="calendarShow = true">
      <view slot="title" class="flex f-36">
        <view class="w-100 c-99"> 类别: </view>
        <view class="flex"> 默认 </view>
      </view>
    </u-cell>
    <u-cell arrow-direction="right" @click="calendarShow = true">
      <view slot="title" class="flex f-36">
        <view class="w-100 c-99"> 业务员: </view>
        <view class="flex"> 1112 </view>
      </view>
    </u-cell>

    <u-cell>
      <view slot="title" class="flex f-36 justify-between">
        <view class="flex-sb">
          <view class="flex w-300 flex-aic">
            <view class="w-100 c-99"> 联系人: </view>
            <text class="">111</text>
          </view>

          <view class="flex-1 flex-sb p-l-20">
            <view class="w-100 c-99"> 性别: </view>
            <text class="">111</text>
          </view>
        </view>
      </view>
    </u-cell>
    <u-cell>
      <view slot="title" class="flex f-36 justify-between">
        <view class="flex-sb">
          <view class="flex w-300 flex-aic">
            <view class="w-100 c-99"> 职位: </view>
            <text class="">111</text>
          </view>

          <view class="flex-1 flex-sb p-l-20">
            <view class="w-100 c-99"> 手机: </view>
            <text class="">111</text>
          </view>
        </view>
      </view>
    </u-cell>

    <u-cell arrow-direction="right" @click="calendarShow = true">
      <view slot="title" class="flex f-36">
        <view class="w-100 c-99"> 授权: </view>
        <view class="flex">
          <view class="flex">
            查看对账单<u-switch
              v-model="value13"
              asyncChange
              @change="asyncChange"
            ></u-switch>
          </view>
          <view class="flex"> 查看库存<u-switch></u-switch> </view>
        </view>
      </view>
    </u-cell>
  </view>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      value13: true,
      config: {
        title: "小a",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [
          {
            key: "btn1",
            icon: "&#xe604;",
            position: "left",
          },
          {
            key: "btn2",
            icon: "&#xe718;",
            position: "left",
          },
        ],
      },
    };
  },
  methods: {
    asyncChange(e) {
      uni.showModal({
        content: e ? "确定要打开吗" : "确定要关闭吗",
        success: (res) => {
          if (res.confirm) {
            this.value13 = e;
          }
        },
      });
    },
    clickBtn(item) {
      // console.log("index", item);
      if (item.key === "btn1") {
        this.$Router.push({
          name: "personnelCustomCustomDetails",
        });
      } else if (item.key === "btn2") {
        // this.productPopShow = !this.productPopShow;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
